<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../plugin/layui/css/layui.css"/>
    <script src="../plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <style>
        #content{
            margin-top: 50px;
            margin-left: 300px;
            width: 400px;
            float: left;
        }
        #search{
            margin-top: 50px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" name="content" id="content" required  lay-verify="required" placeholder="请输入查询内容" autocomplete="off" class="layui-input">
        <input type="button" id="search" value="搜索" class="layui-btn">
    </div>
    <div>
        <table class="layui-table" id="app" lay-filter="test">

        </table>
    </div>
    <script>
        let refreshToken = localStorage.getItem("refreshToken");
        let token=localStorage.getItem("token");
        layui.use(['jquery', 'layer', 'table'], function () {
            let $ = layui.jquery, layer = layui.layer, table = layui.table;
            $("#search").on("click",function(){
                let content=$("#content").val();
                //第一个实例
                table.render({
                    elem: '#app'
                    , url: '../findByContent/'+content //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                        {field: 'vid', title: 'ID', width: 100, sort: true}
                        , {field: 'knowledge', title: '知识点', width: 100}
                        , {field: 'content', title: '描述', width: 100}
                        , {field: 'comments', title: '评论数', width: 100, sort: true}
                        , {field: 'thumbsup', title: '点赞数', width: 100, sort: true}
                        , {field: 'views', title: '访问数', width: 100, sort: true}
                        , {field: 'open', title: '公开等级', width: 100, templet: function (data) {
                                if (data.open == 0) {
                                    return "市级";
                                } else if (data.open == 1) {
                                    return "校级";
                                } else if (data.open == 2) {
                                    return "班级";
                                }
                            }
                        }
                        , {field: 'date', title: '上传时间', width: 100}
                        , {field: '', title: '操作', width: 250, toolbar: "#btn", align: "center"}
                    ]],
                    limit: 5,
                    headers: {refreshToken: refreshToken,token:token},
                    done: function(res, curr, count){

                    }
                });

            });

            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                console.log(data, layEvent);
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                    localStorage.setItem("vid", obj.data.vid);
                    obj.update({
                        views: obj.data.views += 1
                    });
                    layer.open({
                        type: 2,
                        title: "视频详情",
                        maxmin: true,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['1000px', '550px'], //宽高
                        content: 'videoDetail.html',
                        // cancel: function (index, layero) {
                        //     //son_msg就是子页面中的msg数据
                        //     /* var son_msg = $(layero).find("iframe")[0].contentWindow.callBackMsg();
                        //      alert(son_msg);*/
                        //     table.reload('app', {
                        //         url: 'findVideoByTeacherid'
                        //     });
                        // }

                    });
                }
            });

        });
    </script>
    <script type="text/html" id="btn">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn" lay-event="detail">查看</button>
        </div>
    </script>

</body>
</html>